import PropTypes from 'prop-types'
import React, { memo, useEffect, useState } from 'react'
import { CSSTransition, SwitchTransition, TransitionGroup } from 'react-transition-group'

import { PictureBrowserWrapper } from '@/base-ui/picture-browser/style'
import IconClose from '@/assets/svg/icon_close'
import IconArrowLeft from '@/assets/svg/icon-arrow-left'
import IconArrowRight from '@/assets/svg/icon-arrow-right'
import Indicator from '@/base-ui/indicator'
import classNames from 'classnames'

const PictureBrowser = memo((props) => {

  const {pictureUrls, closeClick} = props

  const [currentIndex, setCurrentIndex] = useState(0);
  const [isNext, setIsNext] = useState(false)
  const [showList, setShowList] = useState(true)

  //铺满当前窗口 禁止滚动条显示滚动
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      // 关闭 图片浏览器 恢复滚动条展示
      document.body.style.overflow = 'auto';
    }
  }, []);

  // 关闭图片预览
  const iconCloseClickHandle = () => {
    if ( closeClick ) closeClick()
  }
  // 左右箭头
  const controlClickHandle = (isNext = true) => {
    let newIndex = isNext ? currentIndex + 1 : currentIndex - 1;
    if ( newIndex < 0 ) newIndex = pictureUrls.length - 1;
    if ( newIndex > pictureUrls.length - 1 ) newIndex = 0;
    setCurrentIndex(newIndex);
    setIsNext(isNext);
  }
  // 底部图片切换
  const itemClickHandle =(index)=>{
    setIsNext(index >currentIndex?true:false)
    setCurrentIndex(index);
  }

  // 显示和隐藏
  const toggleHandle =()=>{
    setShowList(!showList);
  }

  return (
    <PictureBrowserWrapper isNext={ isNext } showList={showList}>
      <div className='top' onClick={ iconCloseClickHandle }>
        <div className="close-btn">
          <IconClose/>
        </div>
      </div>
      <div className='slider'>
        <div className="control">
          <div className="btn left" onClick={ e => controlClickHandle(false) }><IconArrowLeft height='77' width='77'/>
          </div>
          <div className="btn right" onClick={ e => controlClickHandle(true) }><IconArrowRight height='77' width='77'/>
          </div>
        </div>
        <dvi className="picture">
          {/*<img src={pictureUrls[currentIndex]} alt=""/>*/ }
          <SwitchTransition mode='in-out'>
            <CSSTransition key={ pictureUrls[currentIndex] } classNames='fade' timeout={ 200 }>
              <img src={ pictureUrls[currentIndex] } alt=""/>
            </CSSTransition>
          </SwitchTransition>
        </dvi>
      </div>
      <div className='preview'>
        <div className="info">
          <div className="desc">
            <div className="count">
              <span>{ currentIndex + 1 }/{ pictureUrls.length }</span>:
              <span>图片{ currentIndex + 1 }</span>
            </div>
            <div className="toggle" onClick={()=>toggleHandle()}>
              <span>隐藏/显示</span>
            </div>
          </div>
          <div className="list" >
            <Indicator selectIndex={ currentIndex }>
              {
                pictureUrls.map((item, index) => {
                  return (
                    <div key={ item } className={ classNames('item', {active: index === currentIndex}) }
                         onClick={ () => itemClickHandle(index) }>
                      <img src={ item } alt=""/>
                    </div>
                  )
                })
              }
            </Indicator>
          </div>
        </div>
      </div>
    </PictureBrowserWrapper>
  )
})
PictureBrowser.propTypes = {
  pictureUrls: PropTypes.array
}
export default PictureBrowser
